<template>
  <div>
      <transition
        v-on:before-enter="beforeEnter"
        v-on:enter="enter"
        v-on:after-enter="afterEnter"
        v-on:enter-cancelled="enterCancelled"
      >
          <div class="ball" v-show="bstate" ref="ball"></div>
      </transition>
      <swiper :swiper = swiperimg ></swiper>
      <div class="title">{{goods.title}}</div>
      <div class="money">市场价:<span>{{goods.sell_price}}</span></div>
      <div class="number">
        数量：<van-stepper v-model="selectcount" disable-input/>
        </div>
        <div class="button">
            <van-button type="info">立即购买</van-button>
            <van-button type="danger" @click="ballstate">加入购物车</van-button>
        </div>
        <div class="bottom_button">
            <van-button plain type="primary" @click="gointreduce">图文详情</van-button>
            <van-button plain type="info">朴素按钮</van-button>
        </div>
  </div>
</template>

<script>


import swiper from '@/components/lunbo.vue'
export default {
  name:'goodlist',
  components:{
      swiper
  },
  data(){
    return{
      // value:this.$store.state.value,
      selectcount:1,
      bstate:false,
      goods:{},
      swiperimg:[]
    }
  },
  methods:{

    
    ballstate(){
      this.bstate = !this.bstate;
      var goodsli = {
        id:this.goods.id,
        count:this.selectcount,
        price:this.goods.sell_price,
        selected:true,
      }
      this.$store.commit('addtocart',goodsli);


      console.log(goodsli)
      // console.log("aaaa")
      // console.log(this.$store.state.cart)
    },
    getinformation(){
      this.$axios.get('http://www.liulongbin.top:3005/api/getthumimages/' + this.$route.params.id).then((res) => {
        console.log(res);
        if(res.data.status == 0){
            this.swiperimg = res.data.message;
        }
      })
    },
    getgoodsinfo(){
      this.$axios.get('http://www.liulongbin.top:3005/api/goods/getinfo/' + this.$route.params.id).then((res) => {
        console.log(res);
        if(res.data.status == 0){
          this.goods = res.data.message[0]
        }
        console.log(this.goods);
      })
    },
    gointreduce(){
      this.$router.push({name:"goodsintroduce",params:{ userId: '123' }})
    },

    beforeEnter: function (el) {
      el.style.transform = "translate(0px,0px)";
    },
    enter: function (el, done) {
      el.offsetWidth;

      const ballposition = this.$refs.ball.getBoundingClientRect();
      const badgeposition = document.getElementById('number').getBoundingClientRect();
      const x = badgeposition.x - ballposition.x;
      const y = badgeposition.y - ballposition.y;
      console.log(ballposition);
      el.style.transform = "translate(10px,10px)";
      el.style.transform = "translate(" + x + "px," + y +"px)";
      el.style.transition = "all .6s cubic-bezier(.5,.05,.43,.52)";
      done()
    },
    afterEnter: function (el) {
      this.bstate = !this.bstate;
    },
    enterCancelled: function (el) {
      // ...
    },
    // onchange(value){
    //   console.log(value);
    //   console.log(this.$store.state.value);
    // },
    // add(){
    //   console.log(this.$store.state.value);
    //   this.$store.commit('increment');
    // },
    // subtract(){
    //   this.$store.commit('subtract');
    // }
    
  },
  created(){
      console.log(this)
    this.getinformation();
    this.getgoodsinfo();
  }
}
</script>

<style scoped>
    .title{
      font-size:18px;
      color:#333;
      font-weight: bold;
      text-align: center;
      margin-top:10px;
    }
    .money{
      padding:0 20px;
      box-sizing: border-box;
      font-size: 16px;
      color:#333;
      margin-top:10px;
    }
    .money span{
      color:red;
    }
    .number{
      display: flex;
      flex-direction: row;
      align-items: center;
      padding:0 20px;
      box-sizing: border-box;
      margin-top:10px;
    }
    .button{
      padding:0 20px;
      box-sizing: border-box;
      margin-top:10px;
    }
    .van-button--info{
      height: 40px;
    }
    .van-button--danger{
      height: 40px;
      margin-left:10px;
    }
    .bottom_button{
      display: flex;
      flex-direction: column;
      padding:0 20px;
      margin-top:10px;
    }
    .bottom_button button{
      margin-top:10px;
    }
    .ball{
      width:20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      z-index:999999;
      top:268px;
      right:252px;
    }
</style>>